import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import BasicsCard from "../components/cards/BasicsCard";
import SlideCard from '../components/cards/SlideCard';
import SearchList from '../components/SearchList';
import mockData from '../mock/data.js';

const SearchPage = (props) => {
  const { navigation } = props;
  const [searchVal, setSearchVal] = useState('');
  const [searchResultList, setSearchResultList] = useState([]);
  const [data, setData] = useState([]);;
  const [currentType, setCurrentType] = useState('man');  //woman

  const onSubmitEditing = () => {
    if (!searchVal) return;
    setSearchResultList(() => mockData["getSearchResultList"].data);
  }

  const init = () => {
    setData(() => mockData["getSearchList"].data);
  }

  useEffect(() => {
    init();
  }, []);

  return (
    <View style={styles.page}>
      <View style={styles.content}>
        <View style={styles.head}>
          <AntDesign name="search1" size={20} />
          <TextInput
            style={styles.headInput}
            placeholder="搜索"
            onChangeText={text => setSearchVal(text)}
            value={searchVal}
            clearTextOnFocus
            onSubmitEditing={onSubmitEditing}
            maxLength={20}
          />
          {
            searchVal ? <AntDesign name="close" size={20} onPress={() => { setSearchVal(""); setSearchResultList([]) }} /> : null
          }
        </View>
        <View style={styles.mid}>
          <TouchableOpacity onPress={() => setCurrentType('man')} activeOpacity={0.8}>
            <Text style={[styles.midBtn, currentType == 'man' && styles.midActiveBtn]}>男士</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => setCurrentType('woman')} activeOpacity={0.8}>
            <Text style={[styles.midBtn, currentType == 'woman' && styles.midActiveBtn]}>女士</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.bottom}>
          {
            !searchResultList.length ?
              <ScrollView style={{ height: '100%' }}>
                <View style={styles.bottomBefore}>
                  {
                    data.length ? data.map(item => {
                      if (item.card == "BasicsCard") {
                        return (<BasicsCard type={item.type} detail={item.detail} key={item.id} navigation={navigation} />)
                      } else if (item.card == "SlideCard") {
                        return (<SlideCard type={item.type} title={item.title} list={item.detail} key={item.id} navigation={navigation} />)
                      } else {
                        return null
                      }
                    }) : null
                  }
                </View>
              </ScrollView>
              :
              <View style={styles.bottomAfter}>
                <SearchList data={searchResultList}></SearchList>
              </View>
          }
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  page: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#fff',
    marginBottom: 220
  },
  content: {
    width: 335,
  },
  head: {
    marginVertical: 20,
    height: 43,
    backgroundColor: 'rgba(0, 0, 0, 0.06)',
    borderRadius: 21.5,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingHorizontal: 15
  },
  headInput: {
    flex: 1,
  },
  mid: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginBottom: 19
  },
  midBtn: {
    width: 92,
    height: 30,
    borderWidth: 1,
    borderColor: '#000',
    color: '#000',
    textAlign: 'center',
    lineHeight: 30,
    marginRight: 10,
    borderRadius: 4
  },
  midActiveBtn: {
    backgroundColor: "#000",
    color: "#fff"
  },
  bottomBefore: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'column',
    flex: 1,
    marginBottom: 200
  },
  bottom: {

  }
})

export default SearchPage;